<template>
	<page ref='page'>
		<!-- 房屋档案新建 wwl -->
		<view class="page">
			<view class="list">
				<cityOptions @change='changeCity' >
					<template slot="info">
						<view class="row">
							<text class="left">所在区域</text>
							<view class="right right2">
								<view class="text1" v-if="infoObj.zone_id">{{regionName}}</view>
								<view class="text2" v-else>请选省/市/区</view>
								<n-icon name="right" size="32" color='#A4A4A4'></n-icon>
							</view>
						</view>
					</template>
				</cityOptions>
				<view class="row">
					<view class="left">
						详细地址
					</view>
					<view class="right">
						<input type="text" class="right_input"  v-model="infoObj.address"  placeholder="请填写详细地址" placeholder-class="text2"/>
					</view>
				</view>
				<view class="row">
					<view class="left">
						姓名
					</view>
					<view class="right">
						<input type="text" class="right_input" placeholder="请填写收货人姓名" placeholder-class="text2"
							v-model="infoObj.name" />
					</view>
				</view>
				<view class="row">
					<view class="left">
						电话
					</view>
					<view class="right">
						<input type="number" maxlength="11" class="right_input " placeholder="请填写收货人电话" placeholder-class="text2"
							v-model="infoObj.phone" />
					</view>
				</view>
			</view>
			<view class="row3">
				<view class="left text66">
					设为默认地址：
				</view>
				<view class="right">
					<view class="" @click='changeDefault(1)' v-if='infoObj.is_default != 1'>
						<n-icon name="square" size="40" color='#A4A4A4'></n-icon>
					</view>
					<view class="" v-else  @click='changeDefault(2)'>
						<n-icon name="squarecheckfill" size="40" color='#ff9b03'></n-icon>
					</view>
				</view>
			</view>
			<view class="bottom_box">
				<button class="btn1" @click="onBack()">取消</button>
				<button class="btn2" :loading='loading' @click="onSave()">保存</button>
			</view>
		</view>
	</page>
</template>

<script>
	import {getHouseRecordAdd,getHouseRecordEdit,getHouseRecordInfo,get_address_manage} from "../static/api.js"
	import {getDefaultHouse} from "@/utils/getRequest.js"
	export default {
		data() {
			return {
				id:null,
				status: null, // 1 增 2 查 3 改
				loading:false,
				regionName: '',
				allloading:false,
				zone_arr:'',
				infoObj: {
					zone_arrs:[],
					status:0,
					is_default:2,
					zone_id: null,
					address: null,
					house_type: ['','','','',''],
					centiare: null,
					name: null,
					phone: null,
					pic_arr: []
				}
			}
		},
		methods: {
			onBack() {
				uni.navigateBack()
			},
			changeDefault(x){
				this.infoObj.is_default  = x
			},
			async getInfo(){
				uni.showLoading()
				var res = await get_address_manage({status:4,address_id:this.id});
				console.log(res,'查询')
				this.infoObj = res
				this.regionName = res.zone_arrs
				uni.hideLoading()
				
			},
			async onSave(){
				if(this.loading || this.allloading) return
				if (!this.$regular.funShowToast(null, this.infoObj.zone_id , '请选省/市/区！')) return false
				if (!this.$regular.funShowToast(null, this.infoObj.address , '请填写详细地址！')) return false
				// if (!this.$regular.funShowToast(null, this.infoObj.centiare , '请填写房本面积(m2)！')) return false
				if (!this.$regular.funShowToast(null, this.infoObj.name , '请填写收货人姓名！')) return false
				if (!this.$regular.funShowToast('phone', this.infoObj.phone , '请输入联系电话！')) return false
				
				this.onFun()
			},
			async onFun(){
				this.loading = true
				try{
					
					var res = await get_address_manage({...this.infoObj,status:this.status,address_id:this.id})
					console.log(res,'地址编辑')
					// var resD = await getDefaultHouse()
					// this.$store.commit('setDefaultHouse',Object.prototype.toString.call(resD) === '[object Object]' ? resD : null)
					this.$global.$editUploadBack(1,'addressmanage')
					uni.showToast({title:'保存成功',icon:'none'})
					// 需要刷新页面
					setTimeout(()=>{
						uni.hideLoading()
						this.loading = false
						uni.navigateBack()
					},1000)
				}catch{
					uni.hideLoading()
					this.loading = false
				}
			},
			changeCity(e) {
				this.regionName = e.name
				this.infoObj.zone_id = e.code[e.code.length-1]
				this.infoObj.zone_arrs = e.name
			},
			onDelete(c, i) {
				this.infoObj.pic_arr.splice(i, 1)
			},
			setPhoto() {
				uni.chooseImage({
					count: 6 - this.infoObj.pic_arr.length, //默认9
					sizeType: ['original', 'compressed'], 
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({mask: false})
						this.allloading = true
						for(let i = 0 ; i <res.tempFilePaths.length ;i++){
							this.$upload(res.tempFilePaths[i]).then(result =>{
								if(result.code == 200){
									this.infoObj.pic_arr.push(result.data.img)
									if(i== res.tempFilePaths.length-1 ){
										this.allloading = false
										this.$forceUpdate()
										uni.hideLoading()
									}
								}
							})
							
						}
						
					}
				});
			},
		},
		onLoad(params) {
			this.status = params.status
			this.infoObj.status  = params.status
			this.id = params.id
			
			if(this.status != 1) this.getInfo()
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding-bottom: 120rpx;
	}
	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		button[loading]::before {
			align-self: center
		}
		button {
			display: flex;
			justify-content: center;
			align-item: center;
			padding: 0;
			border-radius: 0;
		}
	
		button::after {
			border: none;
		}
	
		.btn2 {
			width: 482rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			background: #ff9b03;
			color: #fff;
			font-size: 32rpx;
		}
	
		.btn1 {
			width: 268rpx;
			height: 104rpx;
			background: #e8e8e8;
			line-height: 104rpx;
			text-align: center;
			color: #ADADAD;
			font-size: 32rpx;
		}
	}
	.row3{
		width: 100%;
		padding: 48rpx 29rpx 31rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.row {
		width: 100%;
		padding: 40rpx 40rpx 8rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f4f4f4;
		.left {
			font-size: 30rpx;
			line-height: 44rpx;
			color: #121212;
			font-weight: 500;
		}
		.right {
			width: calc(100% - 5em);
		}

		.right_input {
			width: 100%;
			text-align: end;
		}

		.right3 {
			width: calc(100% - 5em);
			display: flex;
			flex-wrap: wrap;
		}

		.row_key {
			display: flex;
			align-items: flex-end;

			.text_type {
				width: 40rpx;
				text-align: center;
			}

			text {
				margin: 0rpx 10rpx;
			}
		}

		.right2 {
			display: flex;
			justify-content: space-between;
			.iconfont{
				line-height: 22px;
			}
			
			>view:nth-child(1) {
				width: calc(100% - 40rpx);
				text-align: right;
			}
		}
	}
	/deep/ .text2 {
		font-size: 30rpx;
		line-height: 44rpx;
		color: #A4A4A4;
		// color: #121212;
		// font-weight: 600;
	}
	
	/deep/ .text66 {
		font-size: 30rpx;
		line-height: 44rpx;
		// color: #A4A4A4;
		color: #121212;
		font-weight: 600;
	}
	
	.text3 {
		font-size: 30rpx;
		line-height: 44rpx;
		color: #121212;
	}
	
	.text1 {
		font-size: 30rpx;
		line-height: 44rpx;
		color: #666;
	}
	.img_list{
		display: flex;
		flex-wrap: wrap;
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;
		.img_row{
			width: 156rpx;
			height: 156rpx;
			margin-right: 16rpx;
			margin-bottom: 20rpx;
			position: relative;
			image{
				width: 156rpx;
				height: 156rpx;
			}
			.icon{
				position: absolute;
				right: -16rpx;
				top:-16rpx;
				z-index: 1;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			&:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
	.top1123{
		padding: 19px 14px 15px;
		.img{
			width: 25px;
			    height: 25px;
			position: relative;
			    top: 6px;
		}
		.textss{
			display: inline-block;
			    margin-left: 12px;
			    font-size: 16px;
			    font-weight: 600;
			    line-height: 25px;
			    height: 25px;
		}
	}
</style>
